<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link href="css/register.css" rel="stylesheet">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/vue@2.7.16/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui@2.15.6/lib/index.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.6/lib/theme-chalk/index.css">
</head>
<body>

<div id="app" class="form-div">
    <div class="reg-content">
        <h1>欢迎注册</h1>
        <span>已有帐号？</span> <a href="login.jsp">登录</a>
    </div>
    <form id="reg-form">
        <table>
            <tr>
                <th>用户名：</th>
                <th colspan="2"><input id="username" v-model="user.username" type="text" @blur="vertify"></th>
            </tr>
            <tr class="tips">
                <td></td>
                <td colspan="2"><span id="username_err" class="err_msg">{{ err.username_err }}</span></td>
            </tr>
            <tr>
                <th>密&nbsp;&nbsp;&nbsp;码：</th>
                <th colspan="2"><input id="password" v-model="user.password" type="password"></th>
            </tr>
            <tr class="tips">
                <td></td>
                <th colspan="2"><span id="password_err" class="err_msg">{{ err.password_err }}</span></th>
            </tr>
            <tr>
                <th>验证码：</th>
                <th><input id="checkCode" v-model="user.checkCode" type="text"></th>
                <th class="re_img">
                    <img id="checkCodeImg" :src="img" @click="refreshImage">
                </th>
            </tr>
            <tr class="tips">
                <td></td>
                <th colspan="2"><span id="verify_err" class="err_msg">{{ err.verify_err }}</span></th>
            </tr>
            <tr class="button">
                <th colspan="3"><input id="reg_btn" value="注 册" type="button" @click="register"></th>
            </tr>
        </table>
    </form>
</div>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                user:{
                    username:'',
                    password:'',
                    checkCode:'',
                },
                err:{
                    username_err:'',
                    password_err:'',
                    verify_err:''
                },
                img:'checkCodeServlet',
            }
        },
        methods:{
            vertify(){
                axios.post("http://localhost:8080/LoginAndRegistration/selectUserServlet?username="+this.user.username).then((resp) => {
                    if (resp.status === 200) {
                        if (resp.data) {
                            this.err.username_err = "用户名已被占用";
                        } else {
                            this.err.username_err = "";
                        }
                    }
                });
            },
            refreshImage(){
                axios.get("http://localhost:8080/LoginAndRegistration/checkCodeServlet").then((resp)=>{
                    this.img = "checkCodeServlet?" + new Date().getTime()
                }).catch(()=>{
                    this.$message({
                        type: 'info',
                        message: '验证码获取失败'
                    });
                })
            },
            register(){
                axios.post("http://localhost:8080/LoginAndRegistration/registerServlet",this.user).then((resp) => {
                    if(resp.status === 200){
                        if(resp.data === "v_false"){
                            this.err.verify_err = "验证码出错";
                        }else{
                            location.href = "http://localhost:8080/LoginAndRegistration/login.jsp";
                        }
                    }
                })
            }
        }
    })
</script>
</body>
</html>